<template>
  <el-row :gutter="20">
    <el-col :span="6">
        <div style="background: #42b983">1</div>
    </el-col>
    <el-col :span="6">
        <div style="background: orange">2</div>
    </el-col>
    <el-col :span="6">
        <div style="background: green">3</div>
    </el-col>
    <el-col :span="6">
        <div style="background: aquamarine">4</div>
    </el-col>
  </el-row>
    <br>
  <el-row :gutter="20">
    <el-col :span="10">
        <div style="background: #42b983">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>标题</span>
              </div>
            </template>
            <div>卡片内容</div>
          </el-card>
        </div>
    </el-col>
    <el-col :span="10">
        <div style="background: orange">2</div>
    </el-col>
    <el-col :span="4">
        <div style="background: green">3</div>
    </el-col>
  </el-row>

  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>标题</span>
      </div>
    </template>
    <div>卡片内容</div>
  </el-card>

</template>

<script>
    export default {
        name: "A"
    }
</script>

<style scoped>

</style>